<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:include="sys/header :: copy"></div>
<head>
    <title>管理员列表</title>
</head>
<body>
<!--<div id="app" v-cloak>-->
<!--    <el-form :inline="true" style="margin-bottom:10px;margin-top:10px;padding-top:10px;padding-left:10px;background-color:#f2f2f2"-->
<!--             class="demo-form-inline">-->
<!--        <el-form-item label="条件">-->
<!--            <el-input placeholder="" v-model="params.keyword"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--            <el-button type="primary" @Click="query">查询</el-button>-->
<!--            <el-button @Click="reset">重置</el-button>-->
<!--        </el-form-item>-->
<!--    </el-form>-->
<!--    <div id="handleBatch" style="float: right;margin: 5px">-->
<!--        <el-button type="primary" @click="add" icon="el-icon-plus">新增</el-button>-->
<!--        <el-button type="danger" @click="deleteBatch" icon="el-icon-error">批量删除</el-button>-->
<!--    </div>-->
<!--    <div v-show="showList">-->
<!--        <el-table-->
<!--                ref="multipleTable"-->
<!--                @row-click="handleRowChange"-->
<!--                show-overflow-tooltip-->
<!--                @selection-change="selectionRowsChange"-->
<!--                border-->
<!--                :data="tableData"-->
<!--                style="width: 100%">-->
<!--             <el-table-column label="id" prop="id"  type="selection"  width="50" >-->
<!--            </el-table-column>-->
<!--                                       -->
<!--           -->
<!--            <el-table-column label="" prop="menuId"   sortable width="180" >-->
<!--            </el-table-column>-->
<!--                                                  -->
<!--           -->
<!--            <el-table-column label="父菜单ID，一级菜单为0" prop="parentId"   sortable width="180" >-->
<!--            </el-table-column>-->
<!--                                                  -->
<!--           -->
<!--            <el-table-column label="菜单名称" prop="name"   sortable width="180" >-->
<!--            </el-table-column>-->
<!--                                                  -->
<!--           -->
<!--            <el-table-column label="菜单URL" prop="url"   sortable width="180" >-->
<!--            </el-table-column>-->
<!--                                                  -->
<!--           -->
<!--            <el-table-column label="授权(多个用逗号分隔，如：user:list,user:create)" prop="perms"   sortable width="180" >-->
<!--            </el-table-column>-->
<!--                                                  -->
<!--           -->
<!--            <el-table-column label="类型   0：目录   1：菜单   2：按钮" prop="type"   sortable width="180" >-->
<!--            </el-table-column>-->
<!--                                                  -->
<!--           -->
<!--            <el-table-column label="菜单图标" prop="icon"   sortable width="180" >-->
<!--            </el-table-column>-->
<!--                                                  -->
<!--           -->
<!--            <el-table-column label="排序" prop="orderNum"   sortable width="180" >-->
<!--            </el-table-column>-->
<!--                                                  -->
<!--           -->
<!--            <el-table-column label="" prop="status"   sortable width="180" >-->
<!--            </el-table-column>-->
<!--                                    <el-table-column label="操作">-->
<!--                <template slot-scope="scope">-->
<!--                    <el-button type="primary" size="small" @click="handleEdit(scope.row.id, scope.row)"-->
<!--                               icon="el-icon-edit"> 详情-->
<!--                    </el-button>-->
<!--                    <el-button type="danger" size="small" @click="handleDelete(scope.row.id, scope.row)"-->
<!--                               icon="el-icon-delete">删除-->
<!--                    </el-button>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--        </el-table>-->
<!--        <el-pagination-->
<!--                @size-change="handleSizeChange"-->
<!--                @current-change="currentChange"-->
<!--                :current-page="currentPage"-->
<!--                :page-sizes="[10, 20, 50, 100]"-->
<!--                :page-size="size"-->
<!--                layout="total, sizes, prev, pager, next, jumper"-->
<!--                :total="total">-->
<!--        </el-pagination>-->

<!--        <el-dialog title="新增/更新" :visible.sync="dialogFormVisible">-->
<!--            <el-form :model="sysMenu"  ref="submitFrom" :rules="rules" label-width="100px" :label-position="labelPosition">-->
<!--                            <el-form-item label="" prop="menuId">-->
<!--            <el-input v-model="sysMenu.menuId" placeholder=""></el-input>-->
<!--            </el-form-item>-->
<!--                                         <el-form-item label="父菜单ID，一级菜单为0" prop="parentId">-->
<!--            <el-input v-model="sysMenu.parentId" placeholder="父菜单ID，一级菜单为0"></el-input>-->
<!--            </el-form-item>-->
<!--                                         <el-form-item label="菜单名称" prop="name">-->
<!--            <el-input v-model="sysMenu.name" placeholder="菜单名称"></el-input>-->
<!--            </el-form-item>-->
<!--                                         <el-form-item label="菜单URL" prop="url">-->
<!--            <el-input v-model="sysMenu.url" placeholder="菜单URL"></el-input>-->
<!--            </el-form-item>-->
<!--                                         <el-form-item label="授权(多个用逗号分隔，如：user:list,user:create)" prop="perms">-->
<!--            <el-input v-model="sysMenu.perms" placeholder="授权(多个用逗号分隔，如：user:list,user:create)"></el-input>-->
<!--            </el-form-item>-->
<!--                                         <el-form-item label="类型   0：目录   1：菜单   2：按钮" prop="type">-->
<!--            <el-input v-model="sysMenu.type" placeholder="类型   0：目录   1：菜单   2：按钮"></el-input>-->
<!--            </el-form-item>-->
<!--                                         <el-form-item label="菜单图标" prop="icon">-->
<!--            <el-input v-model="sysMenu.icon" placeholder="菜单图标"></el-input>-->
<!--            </el-form-item>-->
<!--                                         <el-form-item label="排序" prop="orderNum">-->
<!--            <el-input v-model="sysMenu.orderNum" placeholder="排序"></el-input>-->
<!--            </el-form-item>-->
<!--                                         <el-form-item label="" prop="status">-->
<!--            <el-input v-model="sysMenu.status" placeholder=""></el-input>-->
<!--            </el-form-item>-->
<!--                                     </el-form>-->
<!--            <div slot="footer" class="dialog-footer">-->
<!--                <el-button @click="resetForm('submitFrom')">取 消</el-button>-->
<!--                <el-button type="primary" @click="ruleFrom('submitFrom')">确 定</el-button>-->
<!--            </div>-->
<!--        </el-dialog>-->
<!--    </div>-->
<!--</div>-->
<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">

        <el-aside width="200px" style="background-color: rgb(238, 241, 246);margin-top: 10px ">
            <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="filterText">
            </el-input>
            <el-tree
                    ref="tree"
                    :data="allMenu"
                    highlight-current="true"
                    @node-click="getCurrentNode"
                    node-key="menuId"
                    :filter-node-method="filterNode"
                    :props="defaultProps">
            </el-tree>
        </el-aside>

        <el-container>
            <el-header>
            <div id="handleBatch" style="float: right;margin: 5px">
                <el-button type="primary" @click="add" icon="el-icon-plus">新增</el-button>
                <el-button type="warning" @click="del">删除</el-button>
            </div>
            </el-header>

            <el-main>
                <el-form :model="sysMenu" ref="submitFrom" :rules="rules" label-width="100px"
                         :label-position="labelPosition">
                    <el-form-item label="菜单名称" prop="name">
                        <el-input v-model="sysMenu.name" placeholder="菜单名称"></el-input>
                    </el-form-item>
                    <el-form-item label="上级菜单">
                        <el-cascader
                                change-on-select
                                :props="defaultProps2"
                                expand-trigger="hover"
                                :options="allMenu"
                                v-model="sysMenu.parentId"
                                @change="handleChange"
                                >
                        </el-cascader>
                    </el-form-item>

                    <el-form-item label="菜单URL" prop="url">
                        <el-input v-model="sysMenu.url" placeholder="菜单URL"></el-input>
                    </el-form-item>
                    <el-form-item label="授权" prop="perms">
                        <el-input v-model="sysMenu.perms" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="类型" prop="type">
                        <el-radio-group v-model="sysMenu.type">
                            <el-radio :label="0">目录</el-radio>
                            <el-radio :label="1">菜单</el-radio>
                            <el-radio :label="2">按钮</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="菜单图标" prop="icon">
                        <el-input v-model="sysMenu.icon" placeholder="菜单图标"></el-input>
                    </el-form-item>
                    <el-form-item label="排序" prop="orderNum">
                        <el-input-number v-model="sysMenu.orderNum"  :min="1" :max="1000" ></el-input-number>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="sysMenu.status">
                            <el-radio :label="0">正常</el-radio>
                            <el-radio :label="1">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                            <el-button type="primary" @click="ruleFrom('submitFrom')">确定</el-button>

                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script th:src="@{/js/sys/sysMenu.js}"></script>
</html>